<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的订单</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="page_box bg_color" id="app" style="min-height: 100vh;">
			<ul class="date_list order_tab">
				<li :class="{'on':tabIndex == 0}" @click="onTab(0)">全部</li>
				<li :class="{'on':tabIndex == 1}" @click="onTab(1)">待付款</li>
				<li :class="{'on':tabIndex == 2}" @click="onTab(2)">待发货</li>
				<li :class="{'on':tabIndex == 3}" @click="onTab(3)">待收货</li>
				<li :class="{'on':tabIndex == 4}" @click="onTab(4)">完成</li>
			</ul>
			<div class="ht"></div>
			<div class="order_box">
				<div class="order_list" v-if="orderList.length > 0">
					<ul class="order_ul">
						<li v-for="(item,i) in orderList" :key="i" @click="goDetail('order_detail.html?id='+item.id)">
							<div class="order_top">
								<span class="no">{{item.order_number}}</span>
								<span class="date">{{item.create_time}}</span>
							</div>

							<div class="order_con" v-for="(item2,i2) in item.OrderGoods" :key="i2">
								<h3>{{item2.title}}</h3>
								<span class="num">x{{item2.number}}</span>
							</div>
							<div class="order_bot">
								<span class="red" v-if="item.status == 1">待付款</span>
								<span class="blue" v-if="item.status == 2">待发货</span>
								<span class="yellow" v-if="item.status == 3">待收货</span>
								<span class="green" v-if="item.status == 4">已完成</span>
								<span class="grey" v-if="item.status == -1">已取消</span>
								<p>共{{item.total_count}}件商品，付款 <em class="red">￥{{item.total_price}}</em></p>
							</div>
						</li>
					</ul>
				</div>
				<div class="null_box" v-else>
					<div class="img"><img src="__API__/lib/images/order_null.png" alt=""></div>
					<p>您还没有订单哦~</p>
				</div>
			</div>
		</div>
		<script>
			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					tabIndex: 0,
					
					orderList: [

					]
				},
				created: function() {
					var that = this;
					if(common.getQueryStringRegExp('type')){
						that.tabIndex= parseInt(common.getQueryStringRegExp('type'));
					}

					common.ajax("{:url('Order/my')}",{token:localStorage.getItem('token'),status:common.getQueryStringRegExp('type')} , function(res) {
						that.orderList = res.data.data

						// that.getData(searchValue);
					})
				},
				methods: {
					goDetail(url) {
						common.openUrl(url)
					},
					onTab(i){
						let that=this
						that.tabIndex = i;
						common.ajax("{:url('Order/my')}",{token:localStorage.getItem('token'),status:i} , function(res) {
							that.orderList = res.data.data

							// that.getData(searchValue);
						})
					}
				}
			});
		</script>
	</body>

</html>
